<template>
    <view class="manage_info_components contract_charge">
        <div class="pub_input">
            <div class="li">
                <div class="title"><text class="xing">*</text> 方案名称</div>
                <div class="input">
                    <input class="inp" type="text" v-model="form.planName" placeholder="请输入" placeholder-style="color:#bbb">
                </div>
            </div>
            <div class="li">
                <div class="title"><text class="xing">*</text> 扣费方式</div>
                <div class="input input_right">
                    <picker :disabled="editId ? true : false" :value="form.deductionMethod_key"
                        :range="options.deductionMethod" range-key="name"
                        @change="(data) => pickerChange('deductionMethod', data)">
                        <input class="inp" type="text" :value="form.deductionMethod_name" placeholder="请选择"
                            placeholder-style="color:#bbb" disabled>
                        <image class="right_icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" />
                    </picker>
                </div>
            </div>
            <div class="li">
                <div class="title"><text class="xing">*</text> 收费类型</div>
                <div class="input input_right">
                    <picker :disabled="editId ? true : false" :value="form.billingType_key" :range="options.billingType"
                        range-key="name" @change="(data) => pickerChange('billingType', data)">
                        <input class="inp" type="text" :value="form.billingType_name" placeholder="请选择"
                            placeholder-style="color:#bbb" disabled>
                        <image class="right_icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" />
                    </picker>
                </div>
            </div>
        </div>
        <div v-show="form.billingType == 1">
            <div class="pub_input_title">价格设置</div>
            <div class="pub_input">
                <div class="li">
                    <div class="title"><text class="xing">*</text> 电价(元/度)</div>
                    <div class="input">
                        <input class="inp" type="digit" @input="dealPrice(1)" v-model="form.fixedCharge.unitPrice"
                            placeholder="请输入" placeholder-style="color:#bbb">
                    </div>
                </div>
                <div class="li">
                    <div class="title"><text class="xing">*</text> 公摊费(元/度)</div>
                    <div class="input">
                        <input class="inp" type="digit" @input="dealPrice(2)" v-model="form.fixedCharge.additionalFee"
                            placeholder="请输入" placeholder-style="color:#bbb">
                    </div>
                </div>
            </div>
        </div>
        <div v-show="form.billingType == 2">
            <div class="pub_input_title">价格设置
                <div class="right" @click="tiersClick(1)">
                    <image class="icon" mode="aspectFit"
                        src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_19.png" />新增梯度
                </div>
            </div>
            <div class="pub_input" v-for="(li, key) in form.tieredCharge.tiers" :key="key">
                <div class="li_title">第{{ key + 1 }}梯度
                    <div class="right" @click="tiersClick(2, key)">
                        <image class="icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_48.png" />删除梯度
                    </div>
                </div>
                <div class="li">
                    <div class="title"><text class="xing">*</text> 用量(度)</div>
                    <div class="input">
                        <input class="inp" type="digit" @input="dealPrice(4, key)" v-model="li.usageThreshold"
                            placeholder="请输入" placeholder-style="color:#bbb">
                    </div>
                </div>
                <div class="li">
                    <div class="title"><text class="xing">*</text> 电价(元/度)</div>
                    <div class="input">
                        <input class="inp" type="digit" @input="dealPrice(5, key)" v-model="li.unitPrice" placeholder="请输入"
                            placeholder-style="color:#bbb">
                    </div>
                </div>
            </div>
            <div class="pub_input">
                <div class="li">
                    <div class="title"><text class="xing">*</text> 公摊费(元/度)</div>
                    <div class="input">
                        <input class="inp" v-model="form.tieredCharge.additionalFee" type="digit" @input="dealPrice(3)"
                            placeholder="请输入" placeholder-style="color:#bbb">
                    </div>
                </div>
            </div>
        </div>
        <div v-if="form.billingType == 3">
            <div class="pub_input_title">费率档位配置</div>
            <div class="pub_input">
                <div class="li_title">月份档位
                    <div class="right right_1">
                        <image class="icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_19.png" />新增
                    </div>
                    <div class="right">
                        <image class="icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_48.png" />删除
                    </div>
                </div>
                <div class="li">
                    <div class="title">请选择月份</div>
                    <div class="input input_right">
                        <input class="inp" type="text" placeholder="请选择" placeholder-style="color:#bbb" disabled>
                        <image class="right_icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" />
                    </div>
                </div>
                <div class="li">
                    <div class="title">请选择月份</div>
                    <div class="input input_right">
                        <input class="inp" type="text" placeholder="请选择" placeholder-style="color:#bbb" disabled>
                        <image class="right_icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" />
                    </div>
                </div>
            </div>
            <div class="pub_input">
                <div class="li_title">小时档位
                    <div class="right right_1">
                        <image class="icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_19.png" />新增
                    </div>
                    <div class="right">
                        <image class="icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_48.png" />删除
                    </div>
                </div>
                <div class="li">
                    <div class="title">请选择小时</div>
                    <div class="input input_right">
                        <input class="inp" type="text" placeholder="请选择" placeholder-style="color:#bbb" disabled>
                        <image class="right_icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" />
                    </div>
                </div>
                <div class="li">
                    <div class="title">请选择小时</div>
                    <div class="input input_right">
                        <input class="inp" type="text" placeholder="请选择" placeholder-style="color:#bbb" disabled>
                        <image class="right_icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" />
                    </div>
                </div>
            </div>
            <div class="pub_input">
                <div class="li_title">1～6月-1～12点</div>
                <div class="li">
                    <div class="title"><text class="xing">*</text> 电价(元/度)</div>
                    <div class="input">
                        <input class="inp" type="text" placeholder="请输入" placeholder-style="color:#bbb">
                    </div>
                </div>
                <div class="li">
                    <div class="title"><text class="xing">*</text> 公摊费(元/度)</div>
                    <div class="input">
                        <input class="inp" type="text" placeholder="请输入" placeholder-style="color:#bbb">
                    </div>
                </div>
            </div>
        </div>
        <div class="pub_btns" v-if="editId == ''" :style="{ 'bottom': bottom }">
            <div class="pub_btn pub_btn_big_normal" @click="toSubmit">保存并提交</div>
        </div>
        <div class="pub_btns" v-else :style="{ 'bottom': bottom }">
            <div class="pub_btn_normal pub_btn_normal_border pub_btn_small" @click="toDelete">删除</div>
            <div class="pub_btn pub_btn_small" @click="toSubmit">保存并提交</div>
        </div>
    </view>
</template>

<script>
export default {
    props: {
        editId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            bottom: `calc(${getApp().globalData.statusBottomHeight}px + 32rpx)`,
            options: {
                deductionMethod: [{ id: 1, name: '先付费后使用' }],
                billingType: [{ id: 1, name: '固定电价' }, { id: 2, name: '梯度电价' }],
                // , { id: 3, name: '复费率电价' }
            },
            form: {
                planName: "",
                deductionMethod: 1,//扣费方式
                deductionMethod_name: '先付费后使用',//扣费方式
                deductionMethod_key: 0,//扣费方式
                billingType: 1,//计费方式：1固定电价  2梯度电价  3复费率电价
                billingType_name: '固定电价',//扣费方式
                billingType_key: 0,//扣费方式
                //billingType为1时必填
                fixedCharge: {
                    unitPrice: '',//价格
                    additionalFee: '',//公摊费
                },
                //billingType为2时必填
                tieredCharge: {
                    tiers: [],// {"usageThreshold": 100,"unitPrice": 80 },
                    additionalFee: '',//公摊费
                }
            }

        };
    },
    watch: {
        editId: {
            handler() {
                if (this.editId) this.getDetail()
            },
            immediate: true,
            deep: true
        },
    },
    onLoad() { },
    mounted() { },
    methods: {
        dealPrice(type, key) {
            // console.log(this.form.fixedCharge.unitPrice);usageThreshold
            let value;
            if (type == 1) value = this.form.fixedCharge.unitPrice;
            if (type == 2) value = this.form.fixedCharge.additionalFee;
            if (type == 3) value = this.form.tieredCharge.additionalFee;
            if (type == 4) value = this.form.tieredCharge.tiers[key].usageThreshold;
            if (type == 5) value = this.form.tieredCharge.tiers[key].unitPrice;
            // value = value.replace(/[^\d.]/g, "");//清除"数字"和"."以外的字符    
            value = value.replace(/^\./g, "");//验证第一个字符是数字而不是字符    
            value = value.replace(/\.{2,}/g, ".");//只保留第一个.清除多余的    
            value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
            value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数  
            setTimeout(() => {
                if (type == 1) this.form.fixedCharge.unitPrice = value;
                if (type == 2) this.form.fixedCharge.additionalFee = value;
                if (type == 3) this.form.tieredCharge.additionalFee = value;
                if (type == 4) this.form.tieredCharge.tiers[key].usageThreshold = value;
                if (type == 5) this.form.tieredCharge.tiers[key].unitPrice = value;
                this.$forceUpdate();
            }, 1);
        },
        pickerChange(type, e) {
            // console.log(type, e.detail.value);
            if (type == 'deductionMethod') {
                this.form.deductionMethod_key = e.detail.value;
                this.form.deductionMethod = this.options.deductionMethod[e.detail.value].id;
                this.form.deductionMethod_name = this.options.deductionMethod[e.detail.value].name;
            }
            if (type == 'billingType') {
                this.form.billingType_key = e.detail.value;
                this.form.billingType = this.options.billingType[e.detail.value].id;
                this.form.billingType_name = this.options.billingType[e.detail.value].name;
            }
        },
        async getDetail() {
            const that = this;
            that.$comFun.openLoading();
            const res = await that.$request.get(`mobile/manager/pricePlan/${that.editId}`, {});
            // console.log(res);
            that.$comFun.closeLoading();
            if (res.code == 200) {
                let findKey = this.options.billingType.findIndex(bli => {
                    return bli.id == res.data.billingType
                })
                this.form = {
                    planName: res.data.planName,
                    deductionMethod: 1,//扣费方式
                    deductionMethod_name: '先付费后使用',//扣费方式
                    deductionMethod_key: 0,//扣费方式
                    billingType: res.data.billingType,//计费方式：1固定电价  2梯度电价  3复费率电价
                    billingType_name: this.options.billingType[findKey].name,//扣费方式
                    billingType_key: findKey,//扣费方式
                    //billingType为1时必填
                    fixedCharge: {
                        unitPrice: res.data.billingType == 1 ? res.data.priceConfig.unitPrice : '',//价格
                        additionalFee: res.data.billingType == 1 ? res.data.priceConfig.additionalFee : '',//公摊费
                    },
                    //billingType为2时必填
                    tieredCharge: {
                        tiers: res.data.billingType == 2 ? res.data.priceConfig.tiers : [],//
                        additionalFee: res.data.billingType == 2 ? res.data.priceConfig.additionalFee : '',//公摊费
                    }
                };
            }
        },
        tiersClick(type, key) {
            if (type == 1) {
                this.form.tieredCharge.tiers.push({
                    usageThreshold: '', unitPrice: ''
                })
            }
            if (type == 2) {
                this.form.tieredCharge.tiers.splice(key, 1);
            }
        },
        async toSubmit() {
            const that = this;
            const form = JSON.parse(JSON.stringify(that.form));

            if (!form.planName) {
                that.$comFun.toast('请填写方案名称');
                return;
            }
            if (form.billingType == 1 && (!form.fixedCharge.unitPrice || !form.fixedCharge.additionalFee)) {
                that.$comFun.toast('请填写价格设置');
                return;
            }
            if (form.billingType == 2 && (form.tieredCharge.tiers.length == 0 || !form.tieredCharge.additionalFee)) {
                that.$comFun.toast('请填写价格设置');
                return;
            }

            if (form.billingType == 2) {
                let find = form.tieredCharge.tiers.find(li => {
                    return !li.usageThreshold || !li.unitPrice;
                })
                if (find) {
                    that.$comFun.toast('请填写价格设置');
                    return;
                }
            }
            uni.showModal({
                title: '提示',
                content: '是否确定保存？',
                success: async function (modalRes) {
                    if (modalRes.confirm) {
                        that.$comFun.openLoading();
                        let res;
                        delete form.billingType_name;
                        delete form.billingType_key;
                        delete form.deductionMethod_name;
                        delete form.deductionMethod_key;
                        if (form.billingType == 1) {
                            form.fixedCharge.unitPrice = Number(form.fixedCharge.unitPrice);
                            form.fixedCharge.additionalFee = Number(form.fixedCharge.additionalFee);
                            delete form.tieredCharge;
                        }
                        if (form.billingType == 2) {
                            form.tieredCharge.additionalFee = Number(form.tieredCharge.additionalFee);
                            form.tieredCharge.tiers.forEach(li => {
                                li.usageThreshold = Number(li.usageThreshold);
                                li.unitPrice = Number(li.unitPrice);
                            })
                            delete form.fixedCharge;
                        }


                        console.log(form);

                        if (that.editId) {
                            delete form.deductionMethod;
                            delete form.billingType;
                            res = await that.$request.put(`/mobile/manager/pricePlan`, {
                                ...form,
                                planId: Number(that.editId)
                            });
                        } else {
                            res = await that.$request.post('mobile/manager/pricePlan', form);
                        }
                        // console.log(res);
                        that.$comFun.closeLoading();
                        if (res.code == 200) {
                            that.$comFun.toast('保存成功');
                            uni.$emit(`manageListReload_1`);
                            setTimeout(() => {
                                that.$comFun.closeWin();
                            }, 1000)
                        } else {
                            that.$comFun.toast(res.msg);
                        }
                    }
                }
            });
        },
        toDelete() {
            const that = this;
            uni.showModal({
                title: '提示',
                content: '是否确定删除？',
                success: async function (modalRes) {
                    if (modalRes.confirm) {
                        that.$comFun.openLoading();
                        const res = await that.$request.delete(`/mobile/manager/pricePlan/${that.editId}`);
                        // console.log(res);
                        that.$comFun.closeLoading();
                        if (res.code == 200) {
                            that.$comFun.toast('删除成功');
                            uni.$emit(`manageListReload_1`);
                            setTimeout(() => {
                                that.$comFun.closeWin();
                            }, 1000)
                        } else {
                            that.$comFun.toast(res.msg);
                        }
                    }
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/manage.scss";
</style>
